<template>
    <transition>
        <div class="tips" v-if="show">
            <span>再次点击退出系统</span>
        </div>
    </transition>
</template>

<script>
    export default {
        name: "tips",
        props: ['show']
    }
</script>

<style lang="scss" scoped>
     .tips {
        color: white;
        height: 36px;
        line-height: 36px;
        width: 152px;
        border-radius: 20px;
        background-color: rgba(0, 0, 0, .8);
        font-size: 14px;
        left: 50%;
        transform: translateX(-50%);
        position: fixed;
        bottom: 80px;
    }
     .v-enter-active, .v-leave-active {
         transition: all 200ms ease;
     }
     .v-enter, .v-leave-to {
         transform: translate(-50%, 20px);
         opacity: 0;
     }
</style>